<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!-- CSS Files -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript">
	//得到焦点
	function inEmail() {
			
		//查找填写邮箱的输入框
		var email01 = document.getElementById("email01");
		//得到焦点的时候默认焦点颜色去掉
		email01.style.border = "1px solid red";
		
	}
	//失去焦点
	function outEmail(){
		var email01 = document.getElementById("email01");
		email01.style.border = "1px solid  green";

		//校验邮箱ajax(邮箱格式是否正确，邮箱是否为空,邮箱是否已经被注册)
		var xhr = getXMLHttpRequest();
		//监听校验过程得到校验结果进行显示页面上
		xhr.onreadystatechange = function() {
		
			//xhr.readyState==4：表示接收到了完整的响应体
			if (xhr.readyState == 4) {
				//是否正确响应
				if (xhr.status = 200) {
					var result = xhr.responseText;
					//查找显示元素的对象
					var emailFont = document.getElementById("emailFont");
					if (result == "邮箱可以正常使用") {
						
						emailFont.color = "green";
					} else {
						emailFont.color = "red";
					}
					emailFont.innerHTML = result;
				}
			}
			}
		
		xhr.open("get", "checkEmailServlet?email=" + email01.value);
		xhr.send();

	}
	function inUsername(){
		  var username01 = document.getElementById("username01");
		  username01.style.border = "1px solid red";
		
	}
	function outUsername(){
	   var username01 = document.getElementById("username01");
		username01.style.border = "1px solid blue";
		var xhr = getXMLHttpRequest();
		//监听校验过程得到校验结果进行显示页面上
		xhr.onreadystatechange = function() {
		
			//xhr.readyState==4：表示接收到了完整的响应体
			if (xhr.readyState == 4) {
				//是否正确响应
				if (xhr.status = 200) {
					var result = xhr.responseText;
					//查找显示元素的对象
					var usernameFont = document.getElementById("usernameFont");
					if (result == "OK") {
						
						usernameFont.color = "green";
					} else {
						usernameFont.color = "red";
					}
					usernameFont.innerHTML = result;
				}
			}
		}
		xhr.open("get", "checkUsernameServlet?username=" + username01.value);
		
		xhr.send();
	}
	function inPassword(){
		  var password01 = document.getElementById("password01");
		  password01.style.border = "1px solid red";
		
	}
	function outPassword(){
	   var password01 = document.getElementById("password01");
		password01.style.border = "1px solid blue";
		var xhr = getXMLHttpRequest();
		//监听校验过程得到校验结果进行显示页面上
		xhr.onreadystatechange = function() {
		
			//xhr.readyState==4：表示接收到了完整的响应体
			if (xhr.readyState == 4) {
				//是否正确响应
				if (xhr.status = 200) {
					var result = xhr.responseText;
					//查找显示元素的对象
					var passwordFont = document.getElementById("passwordFont");
					if (result == "OK") {
						
						passwordFont.color = "green";
					} else {
						passwordFont.color = "red";
					}
					passwordFont.innerHTML = result;
				}
			}
		}
		xhr.open("get", "checkPasswordServlet?password=" + password01.value);
		xhr.send();
	}
	function inRPassword(){
		  var rpassword01 = document.getElementById("rpassword01");
		  rpassword01.style.border = "1px solid red";
		
	}
	function outRPassword(){
	   var rpassword01 = document.getElementById("rpassword01");
	   var password01 = document.getElementById("password01");
		rpassword01.style.border = "1px solid blue";
		//监听校验过程得到校验结果进行显示页面上
		 var rpasswordFont = document.getElementById("rpasswordFont");

            if(!(password01.value==rpassword01.value )){
                rpasswordFont.innerHTML="两次输入的密码不一致";
                rpasswordFont.color="red";
            }
             else {
            rpasswordFont.innerHTML="OK";
            rpasswordFont.color="green";
            }
   
	}
	function changeImage()
    {
    //单击触发图片重载事件，完成图片验证码的更换
        document.getElementById("random").src = document.getElementById("random").src + '?';
    }
</script>
</head>
<body bgcolor="#FCFDEF" style="background-image: url('images/background2.jpg')" >
<!-- style="background-image: url('images/background2.jpg')" -->

	<form action="${pageContext.request.contextPath }/registerServlet" method="post">
	      <h1 align="center" style="margin-top:50px;">注册</h1>
	      <h2 align="center" style="margin-top:50px;">已注册，去</font><a href="login.jsp">登录</a></h2>
		<table align="center" width="650px" style="margin-top:50px;" >
			<tr>
				<td colspan="2" align="center"><font color="red" >${error_msg}</font></td>
			</tr>
			<tr>
					<td style="text-align:right;width:20%;">&nbsp;</td>
				<td style="width:50%;"><input type="text" id="email01" class="form-control input-lg"
				name="email" onfocus="inEmail()" onblur="outEmail()" placeholder="邮箱"/></td>

				<td style="width:0%;"><font color="red" id="emailFont" ></font></td>
			</tr>
			<tr>
				<td style="text-align:right;">&nbsp;</td>

				<td><input type="text" id="username01" class="form-control input-lg"
				name="username" onfocus="inUsername()" onblur="outUsername()" placeholder="用户名"/></td>

				<td><font color="red" id="usernameFont"></font></td>
			</tr>
			<tr>
				<td style="text-align:right;">&nbsp;</td>

				<td><input type="password"  id="password01" class="form-control input-lg"
				name="password" onfocus="inPassword()" onblur="outPassword()" placeholder="密码" /></td>

				<td><font color="red" id="passwordFont"></font></td>
			</tr>
			<tr>
				<td style="text-align:right;">&nbsp;</td>

				<td><input type="password" name="rpassword" id="rpassword01" class="form-control input-lg"
				 onfocus="inRPassword()" onblur="outRPassword()"  placeholder="确认密码"/></td>

				<td ><font color="red" id="rpasswordFont"></font></td>
			</tr>
			<tr>
				<td style="text-align:right;">性别:&nbsp;</td>
				<td colspan="2"><input type="radio" name="gender"  value="男"/><font size="5" color="white">男</font>&nbsp;&nbsp;<input
					type="radio" name="gender"  value="女"/><font size="5" color="white">女</font></td>
			<tr>
				<td style="text-align:right;">&nbsp;</td>

				<td colspan="2"><input type="text" name="telephone"  placeholder="联系电话"/></td>

			</tr>
			<tr>
				<td style="text-align:right;">&nbsp;</td>

				<td colspan="2"><textarea name="introduce"  placeholder="个人介绍"></textarea></td>

			</tr>
			<tr>
				<td style="text-align:center;width:10%"></td>

				<td ><input type="text" name="ckCode"  placeholder="输入校验码"/></td>
				<td ><font color="red">${code_msg}</font></td>	
			</tr>
			<tr>
			     <td style="text-align:center;width:10%"></td>
				 <td  colspan="2" ><img width="150px"  style="padding-top:5px;" height="30px"
					src="${pageContext.request.contextPath}/ckCodeImageServlet" id="random"
					 onclick="changeImage()"/>
				  </td>
			</tr>	
		     <tr>
			 <td>d</td>
				<td style="width:50%;" colspan="2"  >
				<input  style="padding-top:40px;" type="image" src="images/signup.gif"  
				    name="submit"   /></td>
			</tr>
		</table>
	</form>
</body>
</html>